<template>
	<view class="wrapper">
		<!-- 占位组件 -->
		<!-- <empty-page name="我的"></empty-page> -->

		<!-- banner -->
		<view class="banner">
			<view class="user">
				<image class="bg" :src="baseUrl+'/imgs/bg.jpg'" mode="aspectFill"></image>

				<image class="avatar" :src="baseUrl+'/imgs/avatar.jpeg'"></image>
				<view class="info">
					<text class="nickname">搬砖的乔布梭</text>
					<text class="slogan">有的人为了逃避思考愿意做任何事情</text>
				</view>
			</view>

			<view class="dubo">
				<view class="role">
					<u-icon name="level" :color="role==='游客用户'?'#ccc':'#ff9900'" size="30"></u-icon>
					<text>{{role}}</text>
				</view>
				<view class="level">
					当前段位：
					<text>{{level}}</text>
				</view>
			</view>
		</view>

		<!-- 纵排的菜单 -->
		<view class="menu">

			<view v-for="item in menu" :key="item.text" class="menu-item cuotiben">
				<u-icon :color="item.color" size="40" :name="item.iconName"></u-icon>
				<text>{{item.text}}</text>
				<u-icon color="#ccc" size="20" name="arrow-right"></u-icon>
			</view>

		</view>

		<!-- tabbar -->
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	
	export default {
		data() {
			return {
				title: 'Hello',
				role: "游客用户",
				level: "P7",
				menu: [{
						text: "错题本",
						iconName: "pushpin",
						color: "#ff8080"
					},
					{
						text: "我的收藏",
						iconName: "star",
						color: "#ff751a"
					},
					{
						text: "模面记录",
						iconName: "file-text",
						color: "#009933"
					},
					{
						text: "购买服务",
						iconName: "level",
						color: "#003399"
					},
				]
			}
		},

		computed:mapState([
			"baseUrl"
		]),
		onLoad() {
			
		},

	}
</script>

<style lang="scss" scoped>
	$avatar-size: 120rpx;

	.wrapper {
		height: calc(100vh - 40px);
		background-color: #F4F4F4;
		display: flex;
		flex-direction: column;

		.banner {
			.user {
				position: relative;

				image.bg {
					width: 100%;
					height: 300rpx;
				}

				image.avatar {
					border-radius: 50%;
					width: $avatar-size;
					height: $avatar-size;
					border: 1px solid white;
					padding: 15rpx;
					box-sizing: border-box;

					position: absolute;
					left: 30rpx;
					top: 50rpx;
				}

				.info {
					height: $avatar-size;

					position: absolute;
					left: 190rpx;
					top: 45rpx;

					display: flex;
					flex-direction: column;
					justify-content: center;

					text {
						color: white;
						font-weight: 550;
					}

					text.nickname {
						font-size: 1.2rem;
						text-shadow: 1px 1px 10rpx #000;
					}

					text.slogan {
						margin-top: 10rpx;
					}
				}
			}

			.dubo {
				height: 100rpx;
				background-color: white;
				display: flex;
				align-items: center;

				view {
					flex: 1;
					text-align: center;
				}

				view.role {
					border-right: 1px solid #eee;
					// color: darkorange;
					text {
						margin-left: 20rpx;
					}
				}

				view.level {
					text {
						font-weight: bold;
						color: darkorange;
					}
				}
			}
		}

		.menu {
			margin-top: 20rpx;
			color: $text-gray-6;

			.menu-item {
				background-color: white;
				height: 100rpx;
				border-bottom: 1px solid #f0f0f0;
				padding: 0 20rpx;

				display: flex;
				align-items: center;

				u-icon {}

				text {
					margin-left: 20rpx;
					flex: 1;
					color: #333;
				}
			}
		}
	}
</style>